<template>
  <el-button type="danger" @click="delAll" v-bind="$attrs">
    <template #icon v-if="props.showIcon">
      <el-icon>
        <Delete />
      </el-icon>
    </template>
    <slot>批量删除</slot>
  </el-button>
</template>

<script setup lang="ts">
import { Delete } from '@element-plus/icons-vue'

import { defaultProps, emitt } from './props'
import { ElMessage, ElMessageBox } from 'element-plus'

const props = defineProps(defaultProps)
const emits = defineEmits(emitt)

const delAll = async () => {
  if (!props.selectedKeys?.length)
    return ElMessage({
      type: 'warning',
      message: props.showMsg
    })
  ElMessageBox.confirm('确认批量删除该数据?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      if (!(props.delHttp && typeof props.delHttp === 'function'))
        return console.error('No_Del_Http')
      try {
        await props.delHttp({ ids: props.selectedKeys })
        ElMessage({
          type: 'success',
          message: props.successMsg
        })
        emits('update:selectedKeys', [])
        emits('reload')
      } catch (error) {
        console.log(error)
      }
    })
    .catch(() => {})
}

defineOptions({
  name: 'DeleteButton'
})
</script>

<style scoped></style>
